<!--
 * @Descripttion: 文件说明
 * @version: 0.0.1
 * @Author: gaojiapeng
 * @Date: 2021-02-20 11:25:07
 * @LastEditors: gaojiapeng
 * @LastEditTime: 2021-02-26 10:21:24
-->
<template>
  <div class="jindu" :style="{ background: background }">
    <div
      class="shiji twinkling"
      :style="{ width: data > 100 ? 100 : data + '%' }"
    ></div>
    <div
      v-for="(item, index) in split"
      :key="index"
      class="split"
      :style="setOffst(item)"
    ></div>
  </div>
</template>

<script>
export default {
  name: "jindutiao",
  data() {
    return {
      time: null,
      newData: 0
    };
  },
  props: {
    reload: {
      default: false
    },
    data: {
      type: Number,
      default: 50
    },
    split: {
      type: Number,
      default: 20
    },
    background: {
      type: String,
      default: "#141D3E"
    }
  },
  methods: {
    setOffst(index) {
      const data = (100 / this.split) * index;
      return {
        left: data + "%"
      };
    },
    sum(m, n) {
      return Math.floor(Math.random() * (m - n) + n);
    }
  }
};
</script>

<style scoped lang="scss">
.jindu {
  height: 100%;
  width: 100%;
  position: relative;
  .shiji {
    height: 100%;
    background-image: linear-gradient(-90deg, #13c4b8 0%, #4099f8 100%),
      linear-gradient(#59ebe8, #59ebe8);
    background-blend-mode: normal, normal;
  }
  .split {
    position: absolute;
    height: 100%;
    width: 4px;
    background: #000;
    top: 0;
  }
}
</style>
